<template>
  <div class="main-tabs-container">
    <ul class="main-tabs">
      <li>
        <router-link class="nav-list-item active" to="home">
          <!-- <a href="http://www.higuang365.com/wap/"> -->
          <div class="round-button">
            <img src="http://www.higuang365.com/public/images/common/year/首页.png" /><span>首页</span>
          </div>
          <!-- </a> -->
        </router-link>
      </li>
      <li>
        <router-link class="nav-list-item active" to="gallery">
          <div class="round-button">
            <img src="http://www.higuang365.com/public/images/common/year/产品分类.png" /><span>产品分类</span>
          </div>
        </router-link>
      </li>
      <li>
        <a class="nav-list-item" href="http://www.higuang365.com/wap/cart.html">
          <div class="round-button">
            <van-badge :content="$store.state.cartNum" :offset="['-.7rem', '0']" :show-zero="false">
              <img src="http://www.higuang365.com/public/images/common/year/购物车.png" />
            </van-badge>
            <span>购物车</span>
          </div>
        </a>
      </li>
      <li>
        <a class="nav-list-item" href="http://www.higuang365.com/wap/member.html">
          <div class="round-button">
            <img src="http://www.higuang365.com/public/images/common/year/我的账户.png" /><span>我的账户</span>
          </div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "NavBar",
  setup() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
@import "@/common/style/mixin";

.main-tabs-container {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 0.5rem 0;
  z-index: 1000;
  background: url("http://www.higuang365.com/public/images/common/activity/2303/ds_pro10.png") no-repeat;
  background-size: cover;
  // background: $green;
}

.main-tabs {
  @include fj();

  li {
    flex: 1;
  }
}

.round-button {
  display: flex;
  flex-direction: column;

  img {
    width: 4.5rem;
    margin: auto;
    height: auto;
    //  background-color: #ff1f10;
    //     background-image: none;
    //     mask: url(//storage.360buyimg.com/tower/babelnode/static/media/i-miaosha-red.e6c30bae.png)
    //       no-repeat;
    //     mask-size: 100% 100%;
  }

  span {
    display: none;
  }
}

.round-button {
  height: 4.8rem;
  width: 4.8rem;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  position: relative;

  i {
    text-align: center;
    font-size: 2.2rem;
  }

  span {
    font-size: 1.2rem;
    white-space: nowrap;
  }
}

// .router-link-active {
//   color: $green;
//   .round-button::after {
//     content: "";
//     height: 100%;
//     width: 100%;
//     border-radius: 50%;
//     transition: color 0.2s ease-in-out;
//     animation: jello-horizontal 0.9s both;
//     position: absolute;
//     background: $green;
//     opacity: 0.2;
//   }
// }
@keyframes jello-horizontal {
  0% {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, 0.95, 1);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}
</style>
